<template>
  <div class="a">
  <div id="main" style="height: 500px;width: 500px">

  </div>
  <div id="type" style="height: 500px;width: 500px">

  </div>
  </div>

  <el-date-picker v-model="startTime" type="date" value-format="YYYY-MM-DD" style="width: 15%"
                  placeholder="起始日期">
  </el-date-picker>
  <el-date-picker v-model="endTime" type="date" value-format="YYYY-MM-DD" style="width: 15%"
                  placeholder="结束日期">
  </el-date-picker>
  <el-button type="primary" @click="query()">搜索</el-button>
</template>

<script>
import * as echarts from 'echarts';
import axios from "axios";

export default {
  name: "SalesStatistics",
  data() {
    return {
      myChart: {},
      option: {},
      myCharts: {},
      options: {},
      startTime:'',
      endTime:'',


    }
  },
  mounted() {
    this.query();
    },
  methods:{
    query(){
      let param=new URLSearchParams()
      param.append("startTime",this.startTime)
      param.append("endTime",this.endTime)

      this.myChart = echarts.init(document.getElementById('main'));
      axios.post("/api/sellInfo/querySellInfoBean",param).then(res=>{
        this.option = {
          title: {
            text: '销售类别统计',
            subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data:res.data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        this.myChart.setOption(this.option);
      })
      this.myCharts = echarts.init(document.getElementById('type'));
      axios.post("/api/sellInfo/querySellInfo",param).then(res=>{
        this.options = {
          title: {
            text: '销售产品统计',
            subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data:res.data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        this.myCharts.setOption(this.options);
      })
      this.startTime='';
      this.endTime='';
    }
  }

}
</script>

<style scoped>
.a{
  display: flex;
}

</style>